<template>
    <div class="content min-h-screen bg-black flex items-center justify-center p-4">
        <div class="content-list bg-white rounded-lg shadow-2xl p-8 w-full max-w-6xl">
            <p style="text-align: center; font-size: 3rem; font-weight: 600; margin-bottom: 1.5rem;">
                英语词汇量估算工具
            </p>
            <div class="content-items flex flex-col lg:flex-row gap-8">
                <!-- 标准测试选项 -->
                <div class="content-item flex-1 p-6 border border-gray-200 rounded-lg">
                    <p class="text-2xl font-semibold mb-6 ">个人词汇量测试</p>
                    <p class="text-xl text-gray-600 mb-8">通过50个不同难度的单词测试您的词汇量水平</p>
                    <div class="flex-grow flex flex-col justify-center items-center">
                        <p style="
                                text-align: center;
                                font-size: 4rem;
                                font-weight: 600;
                                margin: 2rem auto 0rem auto;
                                background: linear-gradient(90deg, #1e90ff, #00cfff);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                background-clip: text;
                                color: transparent;
                            ">Vocabulary
                        </p>
                        <p style="
                                text-align: center;
                                font-size: 4rem;
                                font-weight: 600;
                                margin: 0rem auto 2rem auto;
                                background: linear-gradient(90deg, #1e90ff, #00cfff);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                background-clip: text;
                                color: transparent;
                            ">Test
                        </p>
                    </div>
                    <div
                        style="display: flex; flex-direction: column; align-items: center; margin: 10px auto 0px auto;">

                        <el-button type="primary" size="large" @click="startStandardTest" class="text-lg px-8">
                            开始测试
                        </el-button>
                    </div>
                </div>

                <!-- 文章测试选项 -->
                <div class="content-item flex-1 p-6 border border-gray-200 rounded-lg">
                    <p class="text-2xl font-semibold mb-6 ">文章词汇量检测</p>
                    <p class="text-xl text-gray-600 mb-8">上传英文文章，我们将分析该文章的词汇量水平</p>

                    <div class="mb-8 upload-icon-row">
                        <el-upload class="upload-demo" drag action="#" :auto-upload="false"
                            :on-change="handleFileChange" :limit="1" accept=".txt,.doc,.docx">
                            <el-icon class="el-icon--upload text-4xl mb-4"><upload-filled /></el-icon>
                            <div class="el-upload__text text-lg">
                                拖拽文件到此处或 <em>点击上传</em>
                            </div>
                            <template #tip>
                                <div class="el-upload__tip text-gray-500">
                                    支持 .txt, .doc, .docx 格式的文件
                                </div>
                            </template>
                        </el-upload>

                    </div>
                    <div style="display: flex; justify-content: center; margin: 20px auto 0px auto;">
                        <el-button type="success" size="large" @click="startArticleTest" :disabled="!selectedFile"
                            class="text-lg px-8">
                            开始检测
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { UploadFilled } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'

    const emit = defineEmits(['start-standard-test', 'start-article-test'])

    const selectedFile = ref(null)

    const handleFileChange = (file) => {
        selectedFile.value = file.raw || file
    }

    const startStandardTest = () => {
        emit('start-standard-test')
    }

    const startArticleTest = () => {
        if (!selectedFile.value) {
            ElMessage.warning('请先选择文件')
            return
        }
        emit('start-article-test', selectedFile.value)
    }
</script>

<style scoped>
    h1,
    h2,
    h3,
    p {
        text-align: left;
    }

    p {
        margin: 10px auto;
    }

    .text-gray-600 {
        color: #606266;
    }

    .text-5xl {
        font-size: 3rem;
    }

    .text-2xl {
        font-size: 1.5rem;
    }

    .upload-demo {
        width: 100%;
        max-width: 400px;
    }

    .el-upload-dragger {
        width: 100%;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .el-upload-dragger:hover {
        border-color: #409eff;
    }

    /* 响应式布局调整 */
    @media (max-width: 1024px) {
        .flex {
            flex-direction: column;
        }
    }

    .content {
        display: flex;
    }

    .content-list {
        width: 100%;
    }

    .content-items {
        display: flex;
    }

    .content-item {
        flex-basis: 50%;
        margin: 25px;
        background: #fff;
        padding: 24px;
        border-radius: 10px;
    }
</style>